<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>

<body>

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>我的优惠券</b></font></h1>
</header>

<div class="mui-content mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item" href="#canuse">可使用</a>
		<a class="mui-control-item" href="#hasuse" >已使用</a>
		<a class="mui-control-item" href="#outuse" >已过期</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
	<div class="mui-slider-group">
		<!--可使用-->
		<div id="canuse" class="mui-slider-item mui-control-content ">
			<div th:each="canuse:${canuse}">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" style="line-height: 2">
						<a href="#">
							<div class="weui-flex" >
								<div class="weui-flex__item" style="background-color: orangered;" >
									<div class="mui-media-body" style="width: 90px"><br/>
										<h3 style="color: white" align="center" th:if="${canuse.feecaltype=='discval'}" th:text="'￥'+${canuse.feeval}"></h3>
										<h3 style="color: white" align="center" th:if="${canuse.feecaltype=='discount'}" th:text="${canuse.feeval*10+'折'}"></h3>
										<h5 style="color: white" align="center" th:text="'满'+${canuse.ordamount}+'可用'">满200可用</h5>
									</div>
								</div>
								<div class="weui-flex__item" >
									<div class="weui-flex" >
										<div class="weui-flex__item" style="flex-grow: 2">
											<h4 style="color: orangered" >&nbsp;&nbsp;<span th:text="${canuse.cpname}"></span></h4>
											<h5>&nbsp;&nbsp;&nbsp;<span th:text="${canuse.startdate}"></span>至<span th:text="${canuse.enddate}"></span></h5>
										</div>
										<div class="weui-flex__item" style="flex-grow: 1">
											<button th:data="${canuse.cpid}" class="mui-btn mui-btn-negative" style="width: 45px" th:align="center" onclick="use(this)">使用</button>
										</div>
									</div>
									<p>&nbsp;&nbsp;---------------------------------------------------------------</p>
									<h5 style="white-space: normal">&nbsp;&nbsp;&nbsp;<span th:text="${canuse.remark}"></span></h5>
									<h5>&nbsp;&nbsp;&nbsp;使用门店:<span th:text="${canuse.chnname}"></span></h5>
								</div>
							</div>

						</a>
					</li>
				</ul>
				<div class="weui-cells__title"></div><!--间隔一下-->
			</div>
		</div>
		<!--已使用-->
		<div id="hasuse" class="mui-slider-item mui-control-content ">
			<div th:each="hasuse:${hasuse}">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" style="line-height: 2">
						<a href="#">
							<div class="weui-flex" >
								<div class="weui-flex__item" style="background-color: grey;" >
									<div class="mui-media-body" style="width: 90px"><br/>
										<h3 style="color: white" align="center" th:if="${hasuse.feecaltype=='discval'}" th:text="'￥'+${hasuse.feeval}"></h3>
										<h3 style="color: white" align="center" th:if="${hasuse.feecaltype=='discount'}" th:text="${hasuse.feeval*10+'折'}"></h3>
										<h5 style="color: white" align="center" th:text="'满'+${hasuse.ordamount}+'可用'">满200可用</h5>
									</div>
								</div>
								<div class="weui-flex__item" >
									<div class="weui-flex" >
										<div class="weui-flex__item" style="flex-grow:2">
											<h4 style="color: grey" >&nbsp;&nbsp;<span th:text="${hasuse.cpname}"></span></h4>
											<h5>&nbsp;&nbsp;&nbsp;<span th:text="${hasuse.startdate}"></span>至<span th:text="${hasuse.enddate}"></span></h5>
										</div>
										<div class="weui-flex__item" style="flex-grow: 1">
											<span>已使用</span>
										</div>
									</div>
									<p>&nbsp;&nbsp;---------------------------------------------------------------</p>
									<h5 style="white-space: normal">&nbsp;&nbsp;&nbsp;<span th:text="${hasuse.remark}"></span></h5>
									<h5>&nbsp;&nbsp;&nbsp;使用门店:<span th:text="${hasuse.chnname}"></span></h5>
								</div>
							</div>

						</a>
					</li>
				</ul>
				<div class="weui-cells__title"></div><!--间隔一下-->
			</div>
		</div>
		<!--已过期-->
		<div id="outuse" class="mui-slider-item mui-control-content ">
			<div th:each="outuse:${outuse}">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" style="line-height: 2">
						<a href="#">
							<div class="weui-flex" >
								<div class="weui-flex__item" style="background-color: grey;" >
									<div class="mui-media-body" style="width: 90px"><br/>
										<h3 style="color: white" align="center" th:if="${outuse.feecaltype=='discval'}" th:text="'￥'+${outuse.feeval}"></h3>
										<h3 style="color: white" align="center" th:if="${outuse.feecaltype=='discount'}" th:text="${outuse.feeval*10+'折'}"></h3>
										<h5 style="color: white" align="center" th:text="'满'+${outuse.ordamount}+'可用'">满200可用</h5>
									</div>
								</div>
								<div class="weui-flex__item" >
									<div class="weui-flex" >
										<div class="weui-flex__item" style="flex-grow: 2">
											<h4 style="color: grey" >&nbsp;&nbsp;<span th:text="${outuse.cpname}"></span></h4>
											<h5>&nbsp;&nbsp;&nbsp;<span th:text="${outuse.startdate}"></span>至<span th:text="${outuse.enddate}"></span></h5>
										</div>
										<div class="weui-flex__item" style="flex-grow: 1">
											<span>已过期</span>
										</div>
									</div>
									<p>&nbsp;&nbsp;---------------------------------------------------------------</p>
									<h5 style="white-space: normal">&nbsp;&nbsp;&nbsp;<span th:text="${outuse.remark}"></span></h5>
									<h5>&nbsp;&nbsp;&nbsp;使用门店:<span th:text="${outuse.chnname}"></span></h5>
								</div>
							</div>

						</a>
					</li>
				</ul>
				<div class="weui-cells__title"></div><!--间隔一下-->
			</div>
		</div>
	</div>
	<div class="weui-cells__title" align="center">没有再多内容啦</div><!--没有再多内容啦-->
</div>

</body>
<script>
    /*点击使用*/
    function use($this) {
		var cpid=$($this).attr("data");
		location.href="/person/use?cpid="+cpid;
    }
</script>
</html>
